<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stone 框架示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .status-panel {
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 10px;
      border-radius: 5px;
      font-size: 12px;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <div id="status" class="status-panel">
    <div>当前主题: <span id="theme-status">亮色模式</span></div>
    <div>计数器: <span id="counter-status">0</span></div>
  </div>

  <script type="module">
    import { Stone } from './stone/core/Stone.js';
    import { Button } from './stone/components/Button.js';
    import { LinearLayout } from './stone/layouts/LinearLayout.js';

    console.log('🚀 Stone UI 框架启动...');

    // 创建应用实例
    const app = new Stone();
    console.log('✅ 应用实例创建完成，初始主题:', app.theme);
    
    // 状态更新函数
    function updateStatus() {
      document.getElementById('theme-status').textContent = 
        app.theme.mode === 'dark' ? '暗黑模式' : '亮色模式';
      document.getElementById('counter-status').textContent = count;
    }
    
    // 创建计数器按钮
    let count = 0;
    const counterBtn = new Button({
      text: `点击计数: ${count}`,
      onClick: function() {
        count++;
        console.log('🔢 计数器点击，新值:', count);
        
        // 直接更新DOM，不依赖框架
        const newText = `点击计数: ${count}`;
        this.element.textContent = newText;
        this.element.innerText = newText;
        this.text = newText;
        
        updateStatus();
        console.log('✅ 计数器更新完成:', count);
        console.log('📝 按钮实际显示:', this.element.textContent);
      },
      style: {
        fontSize: '16px',
        transition: 'all 0.3s'
      }
    });

    // 创建主题切换按钮
    const themeBtn = new Button({
      text: '切换暗黑模式',
      onClick: function() {
        console.log('🎨 主题切换按钮被点击');
        console.log('切换前主题模式:', app.theme.mode);
        
        // 切换主题
        app.toggleTheme();
        
        console.log('切换后主题模式:', app.theme.mode);
        
        // 直接更新DOM，不依赖框架
        const newText = app.theme.mode === 'dark' ? '切换亮色模式' : '切换暗黑模式';
        this.element.textContent = newText;
        this.element.innerText = newText;
        this.text = newText;
        
        updateStatus();
        console.log('✅ 主题按钮文本更新为:', newText);
        console.log('📝 按钮实际显示:', this.element.textContent);
      }
    });

    // 创建主布局
    const mainLayout = new LinearLayout({
      orientation: 'vertical',
      style: {
        padding: '20px',
        maxWidth: '600px',
        margin: '0 auto'
      }
    });

    console.log('📦 组件创建完成，开始组装...');

    // 将布局添加到应用
    app.addComponent(mainLayout);
    console.log('✅ 主布局已添加到应用');
    
    // 添加子组件
    mainLayout.addChild(counterBtn);
    mainLayout.addChild(themeBtn);
    console.log('✅ 子组件已添加到布局');
    
    // 初始化应用主题
    app.render();
    console.log('✅ 应用主题初始化完成');
    
    // 渲染应用
    const appElement = mainLayout.render();
    document.getElementById('app').appendChild(appElement);
    console.log('✅ 应用渲染完成');
    
    // 初始化状态显示
    updateStatus();
    
    // 调试函数
    window.checkButtons = function() {
      console.log('=== 按钮状态检查 ===');
      console.log('计数器按钮DOM文本:', counterBtn.element.textContent);
      console.log('计数器按钮内部文本:', counterBtn.text);
      console.log('主题按钮DOM文本:', themeBtn.element.textContent);
      console.log('主题按钮内部文本:', themeBtn.text);
      console.log('计数器变量值:', count);
    };
    
    window.forceUpdate = function() {
      console.log('🔄 强制更新所有文本...');
      counterBtn.element.textContent = `点击计数: ${count}`;
      themeBtn.element.textContent = app.theme.mode === 'dark' ? '切换亮色模式' : '切换暗黑模式';
      updateStatus();
    };
    
    console.log('🎉 Stone UI 框架启动完成！');
    console.log('💡 调试命令: checkButtons() 或 forceUpdate()');
  </script>
</body>
</html>